<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            height: 150px;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
            background-color: #eee;
        }

        .slider {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            top: 0;
            left: 0;
        }

        .start,
        .stop,
        .back {
            width: 50px;
            margin-top: 110px;
            margin-right: 100px;
        }
    </style>
</head>

<body onselectstart="return false">
    <div class="box">
        <div class="slider"></div>
        <button class="start">开始</button>
        <button class="stop">暂停</button>
        <button class="back">返回</button>
    </div>
</body>
<script>
    var box = document.getElementsByClassName("box")[0];
    var slider = document.getElementsByClassName("slider")[0];
    var start = document.getElementsByClassName("start")[0];
    var stopBtn = document.getElementsByClassName("stop")[0];
    var back = document.getElementsByClassName("back")[0];


    var move = null;
    /* var moveLeft = null;
    box.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        //点击开始
        if (target.className == "start") {
            clearInterval(move);
            clearInterval(moveLeft);
            active();
        }

        //点击停止
        if (target.className == "stop") {
            clearInterval(move);
            clearInterval(moveLeft);
        }

        //点击返回
        if (target.className == "back") {
            clearInterval(move);
            clearInterval(moveLeft);
            slider.style.left = 0 + "px";
        }

        function active() {
            clearInterval(moveLeft);
            move = setInterval(function () {
                var sum = parseInt(slider.offsetLeft);
                if (sum < 500) {
                    sum += 5;
                }
                else {
                    activeLeft();
                }
                slider.style.left = sum + "px";
            }, 25)
        }
        function activeLeft() {
            clearInterval(move);
            moveLeft = setInterval(function () {
                var sum = parseInt(slider.offsetLeft);
                if (sum > 0) {
                    sum -= 5;
                    slider.style.left = sum + "px";
                }
                else {
                    active();
                }
            }, 25)
        }
    } */

    /* start.onclick = function () {
        var site = slider.offsetLeft;
        var end = 500;
        var speed = 9;
        clearTimeout(move);
        move = setInterval(function () {
            site += speed;
            if (site >= end) {
                clearTimeout(move);
            }
            slider.style.left = site + "px";
        }, 25)
    }

    var flag = false;
    stop.onclick = function () {
        if (flag == false) {
            clearTimeout(move);
            flag = true;
        }
        else {
            var site = slider.offsetLeft;
            var end = 500;
            var speed = 9;
            clearTimeout(move);
            move = setInterval(function () {
                site += speed;
                if (site >= end) {
                    clearTimeout(move);
                }
                slider.style.left = site + "px";
            }, 25);
            flag = false
        }
    }

    back.onclick = function () {
        var site = slider.offsetLeft;
        var end = 0;
        var speed = -9;
        clearTimeout(move);
        move = setInterval(function () {
            site += speed;
            if (site <= end) {
                clearTimeout(move);
            }
            slider.style.left = site + "px";
        }, 25)
    } */


    start.onclick = function () {
        animate(slider, "left", 500, "ease-in")
    }

    var flag = false;
    stopBtn.onclick = function () {
        if (flag == false) {
            clearTimeout(move);
            flag = true;
        }
        else {
            animate(slider, "left", 0, "ease-out")
            flag = false
        }
    }

    back.onclick = function () {
        animate(slider, "left", 0, "ease-in")
    }

    // var speed = 0;
    function animate(ele, attr, end, aniType="linear") {
        var site = parseFloat(getStyle(ele, attr));
        // var end = 0;
        end = parseFloat(end);

        var speed = 0;
        clearTimeout(move);
        move = setInterval(function () {

            if (aniType == "linear") {
                speed = end >= site ? 10 : -10
            } else if (aniType == "ease-in") {
                speed = end >= site ? speed + 2 : speed - 2
            } else if (aniType == "ease-out") {
                speed = Math.ceil(Math.abs(end - site) / 10);
                speed = end >= site ? speed : -speed
            }

            site += speed;
            console.log(speed,site);
            ele.style[attr] = site + "px";
            if (Math.abs(end - site) <= Math.abs(speed)) {
                clearTimeout(move);
                ele.style[attr] = end + "px";
            } 
            else {
                ele.style[attr] = site + "px";

            }
            // ele.style[attr] = site + "px";
        }, 25)
    }

    function getStyle(ele, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }
</script>

</html>